import React from 'react';
import { Card, Table, Divider ,Modal, Button, Form, Input, Radio, Select,DatePicker, Icon, Upload, message ,Pagination,Spin} from 'antd';
import { NavLink} from 'react-router-dom';
import ResizeableTitle from './../../../utils/resizeableTitle';
import Utils from './../../../utils/utils';
import './../../../style/style.css';
import Axios from "../../../axios";
const FormItem = Form.Item;
const RadioGroup = Radio.Group;
const TextArea = Input.TextArea;
const Option = Select.Option;

export default class JobImpApprovalRecord extends React.Component {
    state = {
        columns: [{
            title: '审批标题',
            dataIndex: 'title',
            width: 200,
        }, {
            title: '授权时间',
            dataIndex: 'authTime',
            width: 200,
        }, {
            title: '编号',
            dataIndex: 'no',
            width: 200,
        }, {
            title: '发起人',
            dataIndex: 'initiator',
            width: 200,
        }, {
            title: '状态',
            dataIndex: 'state',
            width: 100,
            render: (text, record,index) => (
                <span>
                    {record.state == "VALID" ? <span className="txt-success">审批通过</span> : ''}
                    {record.state == "INVALID" ? <span className="txt-danger">审批拒绝</span> : ''}
                    {record.state == "DISABLE" ? <span className="txt-danger">禁用的</span> : ''}
                    {record.state == "DELETE" ? <span className="txt-danger">删除的</span> : ''}
                    {record.state == "WAIT_AUDIT" ? <span className="txt-danger">待审核</span> : ''}
                    {record.state == "UNDER_REVIEW" ? <span className="txt-danger">审核中</span> : ''}
                </span>
            )
        }, {
            title: '操作',
            key: 'action',
            render: (text, record,index) => (
                <span>
                    <NavLink className="btn-txt-primary" to={`/organMember/user/jobImpApprovalRecordDetails/${record.id}`}>查看详情</NavLink>
                    {record.state == "WAIT_AUDIT" ?
                        <span>
                            <Divider type="vertical" />
                            <a onClick={() => this.handleDel(record)} className="btn-txt-danger">删除</a>
                        </span>
                        : ''
                    }
                </span>
            ),
        }],
        createModal:{
            visible: false,
            confirmLoading: false,
        },
    };
    initParams={
        max:10,
        keywords:'',
        no:'',
        state:'',
        page:1,
    }
    componentWillMount(){
        let params = Utils.FilterParam(this.initParams); //过滤掉为空的参数
        this.listRequest(params);//获取列表数据
    }
    //搜索
    handleFilter = (fieldsValue)=>{
        console.log(fieldsValue)
        const values = {
            ...fieldsValue,
        };
        this.initParams = {
            ...this.initParams,
            ...values,
            page:1
        }
        let params = Utils.FilterParam(this.initParams); //过滤掉为空的参数
        console.log(params)
        this.listRequest(params);//获取列表数据
    }
    //删除
    handleDel = (record)=>{
        Modal.confirm({
            title: '确认删除？',
            content: <div>
                <div>删除后数据不可恢复！</div>
                <div className="txt-danger">确认删除？</div>
            </div>,
            okText:'确认',
            cancelText:'取消',
            onOk:()=>{
                console.log(record.id)
                let params = {
                    applyId:record.id,
                }
                this.delRequest(params);
            }
        })
    }

    /*列表数据请求*/
    listRequest = (params)=>{
        let _this = this;
        this.setState({
            loading:true,
            loadingTxt:'加载中...'
        })
        Axios.dataRequest({
            block:'/hr',
            url:'/userAuthorization/userAuthorizationApply',
            params:params,
        }).then((data)=>{
            console.log(data)
            let page = data.page;
            let dataSource = data.data;
            dataSource.map((item)=>{
                item.key = item.id;
                return item;
            })
            this.setState({
                loading:false,
                dataSource,
                pagination: Utils.pagination(page, (current) => {
                    _this.initParams.page = current;
                    let params = this.initParams;
                    _this.listRequest(params);
                },(current,pageSize) =>{
                    _this.initParams.page = current;
                    _this.initParams.max = pageSize;
                    let params = Utils.FilterParam(this.initParams); //过滤掉为空的参数
                    _this.listRequest(params);
                })
            })
        }).catch((error)=>{
            this.setState({ loading:false })
            console.log(error);
        })
    }
    /*删除请求*/
    delRequest = (params)=>{
        this.setState({
            loading:true,
            loadingTxt:'删除中...'
        })
        Axios.delRequest({
            block:'/hr',
            url:'/userAuthorization/userAuthorizationApply',
            params:params,
        }).then((data)=>{
            console.log(data);
            this.setState({ loading:false })
            message.success('删除成功！',2,()=>{
                let _params = Utils.FilterParam(this.initParams); //过滤掉为空的参数
                this.listRequest(_params);
            });
        }).catch((error)=>{
            this.setState({ loading:false })
            console.log(error);
        })
    }
    //伸缩列
    components = {
        header: {
            cell:ResizeableTitle
        },
    };
    handleResize = index => (e, { size }) => {
        this.setState(({ columns }) => {
            const nextColumns = [...columns];
            nextColumns[index] = {
                ...nextColumns[index],
                width: size.width,
            };
            return { columns: nextColumns };
        });
    };
    render() {
        const columns = this.state.columns.map((col, index) => ({
            ...col,
            onHeaderCell: column => ({
                width: column.width,
                onResize: this.handleResize(index),
            }),
        }));
        return (
            <Spin spinning={this.state.loading} size="large" tip={this.state.loadingTxt}>
                <div className="con-box">
                    <Card bordered={false} title="岗位授权审批记录">
                        <div className="filter-box" style={{marginBottom:15}}>
                            <FilterForm filterSubmit={(fieldsValue)=>{this.handleFilter(fieldsValue)}}/>
                        </div>
                        <Table
                            bordered
                            components={this.components}
                            columns={columns}
                            dataSource={this.state.dataSource}
                            pagination={this.state.pagination}
                        />
                    </Card>
                </div>
            </Spin>
        );
    }

}

//搜索表单
class FilterForm extends React.Component{
    handleFilterSubmit = ()=>{
        let fieldsValue = this.props.form.getFieldsValue();
        this.props.filterSubmit(fieldsValue);
    }
    //重置
    reset = ()=>{
        this.props.form.resetFields();
    }
    render(){
        const { getFieldDecorator } = this.props.form;
        return (
            <Form layout="inline">
                <FormItem label="关键字">
                    {
                        getFieldDecorator('keywords',{
                        })(
                            <Input type="text" placeholder="关键字"/>
                        )
                    }
                </FormItem>
                <FormItem label="编号">
                    {
                        getFieldDecorator('no',{
                        })(
                            <Input type="text" placeholder="编号"/>
                        )
                    }
                </FormItem>
                <FormItem>
                    <Button type="primary" style={{margin:'0 20px'}} onClick={this.handleFilterSubmit}>查询</Button>
                    <Button onClick={this.reset}>重置</Button>
                </FormItem>
            </Form>
        );
    }
}
FilterForm = Form.create({})(FilterForm);
